<!--  -->
<template>
  <div class="data_requests">
    <div class="data_head">
      <div class="data_head_title">数据申请</div>
      <div class="data_head_close" @click="close">关闭</div>
    </div>
    <div class="data_list">
      <div class="data_list_req">
        <div class="data_list_req_item_list">
          <div class="data_list_req_item">申请人：</div>
          <div class="data_list_req_item" style="width: 250px">
            {{ Props.data_request_user.applicant }}
          </div>
        </div>
        <div class="data_list_req_item_list">
          <div class="data_list_req_item">申请部门：</div>
          <div class="data_list_req_item" style="width: 250px">
            {{ Props.data_request_user.department }}
          </div>
        </div>
        <div class="data_list_req_item_list">
          <div class="data_list_req_item">联系电话：</div>
          <div class="data_list_req_item" style="width: 250px">
            {{ Props.data_request_user.tel }}
          </div>
        </div>
        <div class="data_list_req_item_list">
          <div class="data_list_req_item">输出格式：</div>
          <div class="data_list_req_item" style="width: 250px">
            <el-select :disabled="allow_edit" v-model="data_request_configure.output_type">
              <el-option v-for="item in select_output_type" :value="item.value" :label="item.value" :key="item.value" />
            </el-select>
          </div>
        </div>
        <div class="data_list_req_item_list">
          <div class="data_list_req_item">输出坐标系：</div>
          <div class="data_list_req_item" style="width: 250px">
            <el-select :disabled="allow_edit" v-model="data_request_configure.output_coordinate">
              <el-option v-for="item in select_output_coordinate" :value="item.value" :label="item.label" :key="item.value" />
            </el-select>
          </div>
        </div>
        <div class="data_list_req_item_list">
          <div class="data_list_req_item">提供方式：</div>
          <div class="data_list_req_item" style="width: 250px">
            <el-select :disabled="allow_edit" v-model="data_request_configure.output_support">
              <el-option v-for="item in select_output_support" :value="item.value" :label="item.label" :key="item.value" />
            </el-select>
          </div>
        </div>
        <div class="data_list_req_item_list">
          <div class="data_list_req_item">项目名称：</div>
          <div class="data_list_req_item" style="width: 250px">
            <el-input :disabled="allow_edit" style="height: 30px" v-model="data_request_reason.project_name" />
          </div>
        </div>
        <div class="data_list_req_item_list">
          <div class="data_list_req_item">硬件码：</div>
          <div class="data_list_req_item" style="width: 250px">
            <el-input :disabled="allow_edit" style="height: 30px" v-model="data_request_reason.hardware_code" />
          </div>
        </div>
        <div class="data_list_req_item_list">
          <div class="data_list_req_item">申请原因：</div>
          <div class="data_list_req_item" style="width: 250px">
            <el-input :disabled="allow_edit" v-model="data_request_reason.reason" />
          </div>
        </div>
      </div>
      <div class="data_list_data">
        <el-carousel style="width: 100%; height: auto" :interval="3000" arrow="always">
          <el-carousel-item
            v-for="item in Props.data_request"
            :key="item.id"
            style="height: 100%"
          >
            <div>
              <div>数据名称：{{ item.data_name }}</div>
              <div>行政区划：{{ item.administrative_region }}</div>
              <div>审批数据类型：{{ item.approval_data_type }}</div>
              <div>三维数据类型：{{ item.data_type }}</div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="data_func">
      <el-button v-show="allow_edit" @click="backEdit">修改内容</el-button>
      <el-button @click="uploadRequest">{{ allow_edit ? '确认提交' : '提交申请' }}</el-button>
    </div>
  </div>
</template>

<script setup>
//
import { defineEmits, defineProps, onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import { startDataRequest, getDataEdgeFromSuperMapService } from '@/api/W3dServiceApi';
import * as turf from '@turf/turf';

const Emits = defineEmits(["close_card"]);

const Props = defineProps({
  data_request: {
    type: Object,
  },
  data_request_user: {
    type: Object,
  }
});

onMounted(() => {
  //
});

const allow_edit = ref(false);

const data_request_configure = ref({
  output_type: "Esri Shape",
  output_coordinate: "GUANGZHOU2000",
  output_support: "zjsy",
});

const data_request_reason = ref({
  project_name: "",
  hardware_code: "",
  reason: "",
});

const select_output_type = ref([{
  value: 'Esri Shape',
}, {
  value: 'Esri GDB',
},{
  value: 'GeoTIFF',
},])

const select_output_coordinate = ref([{
  value: 'GUANGZHOU2000',
  label: '广州2000'
}])

const select_output_support = ref([{
  value: 'zjsy',
  label: '专机使用'
}, {
  value: 'sjkb',
  label: '数据拷贝'
}])

const backEdit = () => {
  allow_edit.value = false;
}

const uploadRequest = () => {
  if(data_request_reason.value.project_name === "" || data_request_reason.value.hardware_code === "" || data_request_reason.value.reason === "") {
    ElMessage({
      message: "信息缺失！",
      type: "error",
    });
    return;
  }
  if(!allow_edit.value) {
    allow_edit.value = true;
  } else {
    let data_names = '';
    Props.data_request.forEach((item) => {
      data_names += item.data_name + ',';
    });
    Promise.all(
      Props.data_request.map((item) => {
        return getDataEdgeFromSuperMapService(item.service_url);
      })
    ).then((res) => {
      let request_area = 0;
      res.forEach( superMapData => {
        console.log('res', superMapData.geoBounds);
        let polygon = turf.polygon([[
          [superMapData.geoBounds.left, superMapData.geoBounds.bottom],
          [superMapData.geoBounds.right, superMapData.geoBounds.bottom],
          [superMapData.geoBounds.right, superMapData.geoBounds.top],
          [superMapData.geoBounds.left, superMapData.geoBounds.top],
          [superMapData.geoBounds.left, superMapData.geoBounds.bottom]]]);
        let area_result = turf.area(polygon);
        request_area += area_result;
      })
      request_area = request_area / 1000000;
      console.log('res22', request_area);

      const request_data = {
        ByDataApply_sw: {
          fanweixian: '',
          lxfs: Props.data_request_user.tel, // 联系方式
          sjmc: data_names,  // 数据名称
          sqbm: {
            label: Props.data_request_user.department,
            value: ''
          }, // 申请部门
          sqr: {
            label: Props.data_request_user.applicant,
            value: ''
          }, // 申请人
          sqyy: data_request_reason.value.reason, // 申请原因
          xmmc: data_request_reason.value.project_name, // 项目名称
          xzdz: Props.data_request[0].service_url, // 下载地址
          yjm: data_request_reason.value.hardware_code, // 硬件码
          tgfs: data_request_configure.value.output_support, // 提供方式
          sjfw: request_area.toFixed(2) + '平方公里', // 数据范围
          sjfwvalue: request_area.toFixed(2), // 数据范围
        },
      };
      const request_params = {
        defId: '1866043603389829121',
        systemHand: true,
        checkType: 'AGREE',
        vars: '{}',
        formJson: JSON.stringify(request_data),
      }
      startDataRequest(request_params).then(res => {
        console.log('res', res);
        if(res.code === 200){
          ElMessage({
            message: "提交成功！",
            type: "success",
          });
          allow_edit.value = false;
          close();
        } else if(res.code === 500) {
          ElMessage({
            message: `error${res.data}`,
            type: "error",
          });
        } else {
          ElMessage({
            message: "申请失败，请联系管理员",
            type: "error",
          });
        }
      });
    });
  }
}

const close = () => {
  Emits("close_card", false);
};
//
</script>

<style scoped>
.data_requests {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 100%;
  font-size: 18px;
  background-color: #fff;
  border: 1px solid gray;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
}

.data_head {
  display: flex;
  flex: 0.5;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.data_head_title {
  display: inline;
  margin-left: 10px;
}

.data_head_close {
  display: inline;
  margin-right: 10px;
  cursor: pointer;
}

.data_list {
  display: flex;
  flex: 6;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.data_list_req {
  display: flex;
  flex: 1;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: right;
  margin-left: 10px;
  margin-bottom: 10px;
}

.data_list_req_item_list {
  display: flex;
  flex-direction: row;
  margin-left: 20px;
}

.data_list_req_item {
  display: flex;
  width: 120px;
  height: 50px;
}

.data_list_data {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  margin-right: 10px;
}

.el-carousel__item div {
  color: #475669;
  opacity: 0.75;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.data_func {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

</style>
